行内绑定:语法:事件名=“执行函数”
结构+样式+行为都绑定在同一个标签中,不利于后期维护
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#laoLiu{
width:300px ; height:100px; line-height:30px; text-align:center ;
background:burlywood;margin:0 auto;
color:blue;font-size:24px;
}
</style>
<script type="text/javascript">
<!--1、行内绑定事件方法:在开始标签中绑定,把事件名当作元素属性-->
function abc(){
<!--Math.random() 取0到1之间的随机数-->
document.getElementById("laoLiu").innerText=Math.random();
}
</script>
</head>
<body>
<div id="laoLiu" onclick="abc()">我要学习</div>
</body>
</html>
鼠标点击元素后返回值:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#laoLiu{
width:300px ; height:100px; line-height:30px; text-align:center ;
background:burlywood;margin:0 auto;
color:blue;font-size:24px;
}
</style>
<script type="text/javascript">
<!--1、行内绑定事件方法:在开始标签中绑定,把事件名当作元素属性-->
function abc(){
<!--Math.random() 取0到1之间的随机数-->
document.getElementById("laoLiu").innerText=Math.random();
};
window.onload=function(){
var z=document.getElementById("laoLiu");
z.onclick=function(){
abc();
};
};
</script>
</head>
<body>
<div id="laoLiu" >我要学习</div>
</body>
</html>
结果同上